
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  ScrollView,
} from 'react-native';
import TopListView from './TopListView';
var Dimensions = require('Dimensions');
var {height,width} = Dimensions.get('window');
var topMenu = require('../../LocalData/TopMenu.json');
export default class TopView extends Component {
  constructor(props){
    super(props);
    this.state = {
      activePage:0,
    };
  }
  render() {
    return (
      <View style={styles.container}>
        <ScrollView
          horizontal={true}
          pagingEnabled={true}
          showsHorizontalScrollIndicator={false}
          onMomentumScrollEnd={(e)=>{this.onScrollAnimationEnd(e)}}
          >
          {this.renderScrollItem()}
        </ScrollView>
        <View style={styles.indicatorViewStyle}>
          {this.renderIndicator()}
        </View>
      </View>
    );
  }
  onScrollAnimationEnd(e){
    var currentPage = Math.floor(e.nativeEvent.contentOffset.x/width);
    this.setState({
      activePage:currentPage
    });
  }
  renderIndicator(){
    var indicatorArr = [],style;
    for(let i=0; i<2; i++){
      style = (this.state.activePage === i)?{color:'orange'}:{color:'gray'},
      indicatorArr.push(
        <Text key={i} style={[styles.indicatorText,style]}>&bull;</Text>
      );  
    }
    return indicatorArr;
  }
  renderScrollItem(){
    var itemArr = [];
    var colorArr = ["red","green"];
    var dataArr = topMenu.data;
    for(var i=0; i<colorArr.length ;i++){
      itemArr.push(
        <TopListView key={i} dataArr={dataArr[i]}/>
      );
    }
    return itemArr;
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor:'white',
  },
  indicatorViewStyle:{
    flexDirection:'row',
    justifyContent:'center',
    alignItems:'center',
  },
  indicatorText:{
    fontWeight:'bold',
    fontSize:25,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});
